import React from 'react'
import { NavBar,Tabs} from 'antd-mobile'
import { ProductCard, Tag, Button } from 'react-vant';

const List = () => {
  return (
    <div>
       <NavBar>我的订单</NavBar>
       <Tabs>
          <Tabs.Tab title='全部订单' key='fruits'>
            <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="https://img.yzcdn.cn/vant/apple-1.jpg"
                />
            </div>
            <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="https://img.yzcdn.cn/vant/apple-1.jpg"
                />
            </div>
            <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="https://img.yzcdn.cn/vant/apple-1.jpg"
                />
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='待付款' key='vegetables'>
             <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="https://img.yzcdn.cn/vant/apple-2.jpg"
                />
            </div>
            <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="https://img.yzcdn.cn/vant/apple-2.jpg"
                />
            </div>
            <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="https://img.yzcdn.cn/vant/apple-2.jpg"
                />
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='待发货' key='animals'>
             <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="'https://img.yzcdn.cn/vant/apple-8.jpg"
                />
            </div>
            <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="'https://img.yzcdn.cn/vant/apple-8.jpg"
                />
            </div>
            <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="'https://img.yzcdn.cn/vant/apple-8.jpg"
                />
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='待收货' key='dsh'>
             <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="https://img.yzcdn.cn/vant/apple-5.jpg"
                />
            </div>
            <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="https://img.yzcdn.cn/vant/apple-5.jpg"
                />
            </div>
            <div style={{margin: "20px"}}>
                <ProductCard
                 num="2"
                 price="2.00"
                 desc="描述信息"
                 title="商品名称"
                 thumb="https://img.yzcdn.cn/vant/apple-5.jpg"
                />
            </div>
          </Tabs.Tab>
        </Tabs>
    </div>
  )
}

export default List
